<template>
  <div :class="{'mobile-write-off-report': showMobilePage}" class="write-off-report">
    <!-- <WriteOffDataCom :id="id" style="margin-bottom: 56px" @getWriteOffData="getWriteOffData" />
    <SealTable ref="sealTable" :sealing-id="id" :is-show="false" :is-report="true"/> -->
    <WriteOffDataCom :write-off-data="writeOffData" :id="sealingId" :show-mobile-page="showMobilePage" style="padding: 0 12px;" @refreshData="refreshData" />
    <SealTable
      ref="sealTable"
      :sealing-id="sealingId"
      :is-report="true"
      style="margin-top:24px;"/>
    <fixed-pagination :class="{ 'mobile-pagination': showMobilePage }" class="center">
      <el-button v-if="hasRouteAuth('crm:finance:backRecheck')" type="primary" size="small" @click="backRecheck">退回财务复审</el-button>
      <el-button type="primary" size="small" plain @click="toBack">返回</el-button>
    </fixed-pagination>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :append-to-body="false"
      class="back-message small-common-dialog-size">
      <div class="main">
        <div class="message-icon">
          <img src="../../../assets/hint.png" alt="icon">
        </div>
        <p class="message-text">请输入“退回财务复审”,点击确定后将取消封账退回财务复审状态</p>
        <el-input v-model="text" type="text" size="small" placeholder="请输入“退回财务复审”" maxlength="6" />
        <div :style="showMobilePage?'marginLeft:0;':''" class="message-notice">
          <span style="color: #A9AFB6;">封账退回说明</span>
          <el-tooltip effect="dark" placement="top">
            <div slot="content" class="solt-content">
              <p>退回财务复审：</p>
              <p>1.订单状态，从已封账或已完成改为封账中</p>
              <p>2.流水状态，从已封账改为封账中</p>
              <p>3.核销记录，从已封账改为封账中</p>
              <p>4.成本状态，从已封账改为封账中</p>
              <p>5.有调整过的订单，原订单和对冲单信息不可编辑，调整单不限制编辑</p>
            </div>
            <div>
              <tipIcon is-diy class="icon-info" />
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="btn-container">
        <el-button :loading="loading" type="primary" size="small" class="ok" @click="handleOk">确定</el-button>
        <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleClose()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { backRecheck, cancelSealing } from '@/api/sealingAccount';
import SealTable from '@/components/Finance/sealing/SealTable';
import WriteOffDataCom from '@/views/finance/sealingAccount/module/writeOffData';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';

export default {
  name: 'SealingReport',
  components: { SealTable, WriteOffDataCom },
  props: {
    sealingId: {
      type: Number,
      default: null
    },
    writeOffData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      text: '',
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    refreshData(toBackRecheck = false) {
      this.$emit('refreshData', toBackRecheck);
    },
    backRecheck() {
      this.dialogVisible = true;
    },
    handleOk() {
      this.loading = true;
      if (!this.text) {
        this.loading = false;
        this.$message.warning('请输入内容');
        return false;
      } else if (this.text !== '退回财务复审') {
        this.loading = false;
        this.$message.warning('请输入“退回财务复审”');
        return false;
      } else {
        backRecheck(this.sealingId).then(res => {
          this.loading = false;
          this.$message.success('退回成功');
          this.handleClose();
          this.refreshData(true);
        }).catch(err => {
          this.loading = false;
          console.error(err);
        });
      }
    },
    cancelSeal() {
      this.$confirm('<div>请确认是否取消封账</div><div style="color: #999;font-size: 16px;margin-top: 12px">若取消封账，所有审批项的审批状态变为待审批</div>', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'del-icon',
        customClass: 'del-message del-message-cancel',
        center: true,
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        cancelSealing(this.sealingId).then(res => {
          this.$router.push({
            name: 'sealingAccount'
          });
        });
      }).catch(() => {
        return false;
      });
    },
    handleClose() {
      this.text = '';
      this.dialogVisible = false;
    },
    toBack() {
      this.$router.push({
        name: 'sealingAccount'
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.write-off-report {
  overflow: hidden;
  padding-bottom: 50px;
  padding-top: 24px;
  /* .header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    overflow: hidden;
    background: burlywood;
    border-radius: 10px 10px 0 0;
    .text {
      z-index: 2;
      font-size: 24px;
      color: #fff;
      font-weight: bold;
    }
    img {
      position: absolute;
      top: 0;
      width: 100%;
    }
  } */
  .btn {
    padding-bottom: 35px;
    text-align: center;
  }
  .back-message {
    .main {
      text-align: center;
    }
    .message-icon {
      margin: 0 auto;
      width: 88px;
      height: 88px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .message-text {
      padding: 12px 0 24px;
      margin: 0;
      font-size: 20px;
      color: #333;
      font-weight: 700;
    }
    .icon-info {
      margin-left: 8px;
      color: #406EFF;
    }
    .message-notice {
      margin-top: 12px;
      margin-left: 250px;
      width: 107px;
      display: flex;
    }
    .btn-container {
      text-align: center;
      margin-top: 17px;
      .ok {
        width: 120px;
        height: 40px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        color: white;
        margin: 0;
        line-height: 16px;
      }
      .cancel-btn-style {
        font-size: 16px;
        height: 40px;
      }
    }
  }
  .mobile-pagination {
    .el-button {
      flex: 1;
    }
  }
  .write-off-data-wrap {
    &.mobile-detail-wrap {
      margin-top: 0 !important;
      ::v-deep .title-box {
        margin-bottom: 0 !important;
      }
    }
  }
}
.mobile-write-off-report {
  padding-top: 12px;
}
.solt-content {
  max-width: 250px;
  p {
    margin: 0;
    padding-bottom: 5px;
    &:last-child {
      padding-bottom: initial;
    }
  }
}
</style>
